<template>
<div class="content">
  <div v-for="(item, index) in items"
       :key="index"
       @click="handleItemClick(item)"
       class="item">
    <div><i class="icon el-icon-s-management"></i></div>
    <div class="wrapper">
      <div class="title">{{item.name}}</div>
      <div class="path">{{item.path}}</div>
    </div>
  </div>

</div>
</template>

<script>
export default {
  name: 'Item',
  data () {
    return {
      api: {
        list: this.$api.item.list
      },
      items: []
    }
  },
  methods: {
    handleItems () {
      this.$httpf({ url: this.api.list }, data => {
        this.items = data.data.data.list
      })
    },
    handleItemClick (item) {
      this.$router.push({ path: '/home',
        query: {
          code: item.code
        } })
    }
  },
  created () {
    this.handleItems()
  }
}
</script>

<style lang="less" scoped>
  .content {
    width: 1168px;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    box-sizing: border-box;
    .item {
      height: 72px;
      font: 16px Roboto,Avenir,Helvetica,Arial,sans-serif;
      padding: 0 20px;
      background-color: rgba(66, 185, 131, 0.05);
      display: flex;
      cursor: pointer;
      .icon {
        font-size: 36px;
        line-height: 72px;
      }
      .title {
        color: #2c3e50;
      }
      .path {
        color: #6a8bad;
      }
      .wrapper {
        padding-top: 15px;
        padding-left: 10px;
        box-sizing: border-box;
      }

    }
    .item:hover {
      background-color: rgba(66, 185, 131, .4);
    }
  }
</style>
